<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>数据可视化项目</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/components.css" />
	</head>

	<body>
		<div id="app">
			<!-- 页头 -->
			<div class="header">
				<div id="logo">
					<h2>数据可视化项目</h2>
				</div>
			</div>
			<!-- 内容主体 -->
			<div class="main">
				<!-- 左边大图 -->
				<div class="main-left com-card">
					<div class="com-card-inner">
						<div class="content">
							<h2>动态</h2>
							<p>这个区域是显示图形（折线图，饼图...)</p>
						</div>
					</div>
				</div>
				<!-- 右边登录栏 -->
				<div class="main-right com-card" id="login">
					<div class="com-card-inner">
						<h2>登&nbsp;录</h2>
						<div class="login-row">
							<span>用户名：</span>
							<input
								type="text"
								required="required"
								name="u"
								class="com-input-text"
								v-model="loginForm.username"
							/>
						</div>
						<div class="login-row">
							<span>密&nbsp;&nbsp;&nbsp;码：</span>
							<input
								type="password"
								required="required"
								name="pw"
								class="com-input-text"
								v-model="loginForm.passwd"
							/>
						</div>
						<div class="login-row">
							<span>验证码：</span>
							<input
								type="text"
								required="required"
								class="com-input-text"
								v-model="loginForm.vericode"
								@keyup.enter="onLogin"
							/>
						</div>
						<div class="login-row">
							<div @click="changeVericode">
								<img
									:src="vericodeUrl"
									alt="验证码"
									class="vericode-box"
								/>
							</div>
						</div>
						<div class="login-row">
							<button
								type="button"
								id="login-btn"
								@click="onLogin"
								class="com-btn"
								style="width: 80%"
							>
								登录
							</button>
						</div>
						<div class="login-row" id="login-font">
							<span>还没有账号？</span>
							<a href="register.html">立即注册</a>
							&NonBreakingSpace;
							<a href="">忘记密码？</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Vue.js框架 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- Axios库，提供AjaxHttp请求 -->
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<!-- 用于转换Json到表单格式 -->
		<script src="https://cdn.jsdelivr.net/npm/qs@6.9.4/dist/qs.min.js"></script>
		<script src="js/login.js"></script>
	</body>
</html>
